<template>
  <div class="home-page">
    <div class="gd-header">
      <img :src="item.smallPicture">
      <div class="text">
        <div class="title">{{item.name}}</div>
        <div class="info">{{item.description}}</div>
        <div class="price">
          <small>￥</small>
          {{price}}
        </div>
      </div>
    </div>

    <div class="group">
      <van-panel title="以下小伙伴正在拼团">
        <template v-for="item in list">
          <van-cell
            :key="item.groupBuyID"
            :title="JSON.parse(item.memberList)[0].userID + ':还缺少' + (item.numberOfMember - JSON.parse(item.memberList).length) +'个小伙伴'"
            value
            :label="item.time"
            v-if="JSON.parse(item.memberList).length"
          >
            <van-button size="small" type="primary" @click="joinGroup(item.groupBuyID)">去拼团</van-button>
          </van-cell>
        </template>
      </van-panel>
    </div>
    <div class="group detail">
      <van-panel title="商品详情">
        <div class="goods-info" v-html="item.description">
          <!-- <p>大连分行阿呆防寒服华盛顿凤凰爱好阿萨德好的哈哈发货爱德华阿道夫阿道夫哈士大夫哈师大发发看234阿发斯蒂芬申达股份</p>
          <img src="https://edu-image.nosdn.127.net/07e3b8f9-5721-47bb-a710-ab8cce9cab9e.jpg">
          <p>大连分行阿呆防寒服华盛顿凤凰爱好阿萨德好的哈哈发货爱德华阿道夫阿道夫哈士大夫哈师大 是否阿道夫发发看申达股份</p>
          <p>大连分行阿呆防寒服华盛顿凤凰爱好阿萨德好的哈哈发货爱德华阿道夫阿道夫哈士大夫哈师大发发看申达股份</p>
          <p>大连分行阿呆防寒服华盛顿凤凰爱好阿萨德好的哈哈发货爱德华阿道夫阿道夫哈士大夫哈师啊的说法地方大发发看申达股份</p>
          <p>大连分行阿呆防寒服华盛顿凤凰爱好阿萨德好的哈哈发货爱德华阿道夫阿道夫哈士大夫哈师大发发看申达股份</p>-->
        </div>
      </van-panel>
    </div>
    <!-- <div class="group">
      <van-panel title="热门推荐">
        <div class="hot flex-row">
          <div class="item">
            <div class="img bg" :style="{backgroundImage: 'url('+info.img+')'}"></div>
            <div class="title">打发大沙发斯蒂芬阿发阿道夫阿斯蒂芬</div>
            <div class="price">
              <small>￥</small>12
            </div>
          </div>
          <div class="item">
            <div class="img bg" :style="{backgroundImage: 'url('+info.img+')'}"></div>
            <div class="title">打发大沙发斯蒂芬阿发阿道夫阿斯蒂芬</div>
            <div class="price">
              <small>￥</small>12
            </div>
          </div>
          <div class="item">
            <div class="img bg" :style="{backgroundImage: 'url('+info.img+')'}"></div>
            <div class="title">打发大沙发斯蒂芬阿发阿道夫阿斯蒂芬</div>
            <div class="price">
              <small>￥</small>12
            </div>
          </div>
        </div>
      </van-panel>
    </div>-->
    <sku ref="sku" :item="item" type="one" @buy="buy"></sku>
    <van-goods-action v-if="priceList.length">
      <van-goods-action-big-btn :text="'单独购买￥' + priceList[0].instantPrice" @click="buyOne"/>
      <van-goods-action-big-btn
        primary
        :text="'我要开团￥' + priceList[0].groupPrice"
        @click="buyGroup"
      />
    </van-goods-action>
  </div>
</template>

<script>
import Tabbar from '@/components/Tabbar.vue'
import Sku from '@/components/Sku.vue'
import mixin from '@/mixin'
import { viewProduct, postPurchase, getGroup, getGroup2 ,getDistributedProduct} from '@/api'

export default {
  name: 'goods-detail',
  mixins: [mixin],
  components: {
    Tabbar,
    Sku
  },
  data() {
    return {
      item: {},
      originList: [],
      list: [],
      priceList: []
    }
  },
  created() {
    if (this.$store.state.token) {
      this.getData()
    }
  },
  activated() {
    this.getGroup()
  },
  
  watch: {
    '$store.state.token'() {
      this.getData()
    }
  },
  computed: {
    price() {
      let length = this.priceList.length
      if (length === 0) {
        return 0
      } else if (length === 1) {
        return this.priceList[0].instantPrice
      } else {
        return this.priceList[0].instantPrice + '-' + this.priceList[length - 1].instantPrice
      }
    }
  },
  methods: {
    getGroup() {
      // console.log(this.$route.query.distributorID);
      // console.log(this.$route.query.productId);
      getGroup(this.id).then(res => {
        console.log(JSON.parse(JSON.stringify(res)))
        // this.originList = res
        // this.setData()
        // this.timer = setInterval(() => {
        //   this.setData()
        // }, 1000)
      })
      getGroup2(this.id).then(res => {
        console.log(JSON.parse(JSON.stringify(res)))
        this.originList = res
        this.setData()
        this.timer = setInterval(() => {
          this.setData()
        }, 1000)
      })
    },
    setData() {
      this.list = this.originList.map(item => {
        let newitem = { ...item }
        let end = this.$moment(item.createTime).add('hours', item.duration || 20).valueOf()
        let now = Date.now()
        let ms = end - now
        if (ms > 0) {
          let d = 24 * 3600000
          let h = 3600000
          let m = 60000
          let s = 1000
          let msd = ms % d
          let msh = ms % d % h
          let msm = ms % d % h % m
          let dd = Math.floor(ms / d)
          let hh = Math.floor(msd / h)
          let mm = Math.floor(msh / m)
          let ss = Math.floor(msm / s)
          newitem.time = `${dd}天${hh}时${mm}分${ss}秒`
        } else {
          newitem.time = '结束了'
        }
        return newitem
      })
    },
    getData() {
      this.id = this.$route.query.productId
      let data2 = {
        // getDistributedProduct:this.$route.query.productId,
        productID:this.$route.query.productId,
        distributorID:this.$route.query.distributorID,
      };
      console.log(data2)
      // console.log(this.$route.params.distributorID);
      // console.log(this.$route.params.productId);
      // console.log(getDistributedProduct);
      // console.log(distributorID);
      getDistributedProduct(data2).then(res => {
        let item = res
        console.log(item);
        // item.tags = JSON.parse(res.tags)
        // let priceList = res.priceInfo.map((item) => {
        //   item.incomeClassList = JSON.parse(item.incomeClassList)
        //   item.personalList = JSON.parse(item.personalList)
        //   item.specList = JSON.parse(item.specList)
        //   return item
        // })
        // this.priceList = priceList.sort(this.compare('instantPrice'))
        this.priceList = item.priceInfo
        item.numberOfMember = 12;
        item.duration = 12;
        item.productID = this.$route.query.productId;
        this.item = item
        this.$store.commit('serCurrentGoods', item)
      })
    },
    buyOne() {
      this.$refs.sku.buy()
    },
    buy(data) {
      postPurchase(data).then(res => {
        console.log(res)
        this.$toast('购买成功')
        this.getGroup()
      })
    },
    joinGroup(id) {
      this.$router.push('/group/' + id)
    },
    buyGroup() {
      this.$router.push('/open-group')
    },
    group() {
      this.$router.push('/group')
    }
  },
  filters: {
    spe(val) {
      let arr = JSON.parse(val).map(item => {
        return item.value
      })
      return arr.join('-')
    }
  }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import '../style/mixin'
.gd-header
  background #ffffff
  .text
    padding 12px 15px
  .title
    title()
  .info
    desc()
  .price
    font-size 18px
    color #ff2200
    font-weight bold
    text-align right
    small
      font-size 12px
  img 
    width 100%
.group
  margin-top $part-width
.detail
  overflow hidden
.hot
  padding 15px
  box-sizing border-box
  .item
    overflow hidden
  .img
    width calc(33.33vw - 20px)
    height calc(33.33vw - 20px)
  .title
    font-size 12px
    line-height 12px
    margin-top 10px
    padding 0 4px
    no-wrap()
  .price
    font-size 14px
    line-height 14px
    margin-top 5px
    padding 0 4px
    color #ff2200
    small 
      font-size 12px
.goods-info
  padding 15px
  font-size 14px
  color #333333
  line-height 24px
  text-indent 2em
  p
    margin-bottom 8px
  img 
    width 100%
    margin-bottom 10px
img.icon
  width 44px
  height 44px
  margin-right 10px
</style>
